<template>
    <div class="dashboard-container">

        

        <el-card v-loading="fullscreenLoading">
            <div class="search-list-box">
                <el-input class="name" v-model="form.orderCode" placeholder="请输入订单编号"></el-input>
                <el-input class="name" v-model="form.phone" placeholder="请输入下单手机号"></el-input>
                <el-button type="primary" plain @click="searchList">查询</el-button>
            </div>
            <el-table :data="data.list" border style="width: 100%" :highlight-current-row="currentRow">
                <el-table-column label="订单编号" prop="orderCode">
                </el-table-column>
                <el-table-column label="下单时间" prop="creatTime.$numberLong">
                    <template slot-scope="scope">
                        {{ timeClear(scope.row.creatTime.$numberLong) }}
                    </template>
                </el-table-column>
                <el-table-column label="营位" prop="creatTime.$numberLong">
                    <template slot-scope="scope">
                        {{scope.row.campInfo[0].groupCode_txt}} / {{ scope.row.campInfo[0].title }}
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" prop="status.$numberInt">
                    <template slot-scope="scope">
                        {{ orderStatus(scope.row.status.$numberInt) }}
                    </template>
                </el-table-column>
                <el-table-column label="下单手机号" prop="phone">
                </el-table-column>
                <el-table-column fixed="right" label="购买商品" width="80" >
                    <template slot-scope="scope">
                        <el-button type="text" @click="seeGoods(scope.row.gdItems)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="130">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="cancelOrder(scope.row)" v-if="scope.row.status.$numberInt == 1">取消订单</el-button>
                        <el-button type="text" size="small" @click="Dispatch(scope.row)" v-if="scope.row.status.$numberInt == 1">派送</el-button>
                        <!-- <el-button type="text" size="small" @click="Dispatch(scope.row)" v-if="scope.row.status.$numberInt == 2">已送达</el-button> -->
                        <el-button type="text" size="small"  v-if="scope.row.status.$numberInt == 4 || scope.row.status.$numberInt == 3">无</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :data="data" @currentChange="currentChange"></pagination>
        </el-card>

        <el-drawer title="商品列表" :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="w-drawer">
            <div class="goods-list">
                <div class="item" v-for="(item, index) in goods">
                    <img :src="item.img" alt="">
                    <div class="content">
                        <div>{{ item.name }}</div>
                        <div class="ms-total">
                            <div>x{{ item.num.$numberInt }}</div>
                            <div>金额：￥{{ item.subtotal }}</div>
                        </div>
                    </div>
                </div>
                <div class="order-total"><span>总计：</span>￥{{ orderTotal }}</div>
            </div>
        </el-drawer>

    </div>
</template>

<script>
import { parseTime } from '@/utils/index';
import request from '@/utils/request';
import { remove } from 'js-cookie';
export default {
    data() {
        this.parseTime = (d) => parseTime(d)
        return {
            postFileUlr: process.env.VUE_APP_BASE_API + '/upload-file',
            list: [],
            currentRow: false,
            drawer: false,
            direction: 'rtl',
            goods: [],
            orderTotal: 0,
            data: '',
            form: {},
            fullscreenLoading: true,
        }
    },
    mounted() {
        let {day} = this.$route.query
        if (day) {
        this.searchDay = day;
        this.day = day;
        }
        this.getList();
    },
    methods: {
        searchList() {
            this.fullscreenLoading = true;
            this.getList();
        },
        currentChange(e) {
            this.getList(e);
        },
        Dispatch(item) {
            console.log(item)
            this.$confirm(`是否确定商品已配齐，准备开始配送`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get('/order-list/dispatch', {
                    params: {
                        id: item._id,
                        openid: item.openid
                    }
                }).then((res)=> {
                    this.getList();
                })
               
            })
        },
        // 取消订单
        cancelOrder(item) {
            this.$confirm(`确定取消${item.orderCode}订单?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get('/order-list/cancel', {
                    params: {
                        id: item._id,
                    }
                }).then((res)=> {
                    this.getList();
                })
               
            })
        },
        developed() {
            this.$notify({
                title: '此功能尚未开发',
                message: '此功能尚未开发',
            });
        },
        seeGoods(item) {
            this.goods = item;
            let money = 0;
            for (var i = 0; i < item.length; i++) {
                money += Number(item[i].subtotal)
            }
            this.orderTotal = money;
            this.drawer = true;
        },
        handleClose(done) {
            done();
            this.orderTotal = 0;
            this.goods = [];
        },
        orderStatus(s) {
            if (s == 1) {
                return '已下单'
            } else if (s == 2) {
                return '已派送'
            } else if (s == 3) {
                return '已送达'
            } else if (s == 4) {
                return '已取消'
            }
        },
        getList(num) {
            request.get('/order-list', {
                params: {
                    pageNum: num || 1,
                    orderCode: this.form.orderCode || '',
                    phone: this.form.phone || ''
                },
            }).then((res) => {
                this.data = res.data;
                this.fullscreenLoading = false;
            })
        },
        timeClear(timestamp) {
            var date = new Date(parseInt(timestamp));
            var Y = date.getFullYear() + "-";
            var M =
                (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) + "-";
            var D =
                (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
            var h =
                (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";

            var m =
                (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
                ":";
            var s =
                date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            return Y + M + D + h + m + s;
        },
    },
}
</script>

<style lang="scss">
.w-drawer{
    .el-drawer__body{
        height: calc(100% - 45px);
    }
}
.ms-total{
    display: flex;
    justify-content: space-between;
}
.goods-list{
    padding: 0 20px 100px;
    height: 100%;
    overflow: auto;
    position: relative;
    .order-total{
        position: absolute;
        background: #fff;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        box-shadow: 0 0 10px #dddddd;
        display: flex;
        align-items: center;
        line-height: 1;
        justify-content: flex-end;
        padding-right: 20px;
        font-size: 24px;
        font-weight: bold;
        span{
            font-size: 12px;
        }
    }
    .item{
        display: flex;
        padding-bottom: 10px;
        .content{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    }
    img{
        margin-right: 10px;
        width: 80px;
        height: 80px;
        display: inline-block;
    }
}
</style>